<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<link href="local.css" rel="stylesheet" type="text/css" media="screen">
	<title>CCS 3 =)</title>
</head>

<body onload="showNewPage('start')">

<div style="margin-right:auto;margin-left:auto;width:1024px;">
	<div class="header">CSS 3 for dummies by dummies</div>

	<div class="dynamicContent">
		<div id="content"> </div>
	</div>

	<div style="margin-top:30px;">
		<div class="prevButton" onclick="showNewPage('prev')">Tilbake</div>
		<div class="nextButton" onclick="showNewPage('next')">Neste</div>
	</div>
	<div style="clear:both; padding-top:20px;">
	<ul style="bottom:0; width:100%;">
		<li><a href="#"><img id="menuItem0" src="menuItemSelected.png.png" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem1" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem2" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem3" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem4" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem5" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem6" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem7" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem8" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
		<li><a href="#"><img id="menuItem9" src="menuItem.jpg" alt="side 1" width="40"/></a></li>
</ul>
		</div>
	<div style="text-align:center; font-size:14px; font-style:italic; clear:both;margin-top:100px;">
		Copyright Raymond Koteng
	</div>

</div>

</body>

<script language="JavaScript">
	var pageNumer = 0;
	var numberOfPages = 9;
	var outPutHTML ="";

	function showNewPage(direction) {
		if (direction == 'start') {
			pageNumer = 0;
		} else if (direction == 'prev') {
			if (pageNumer > 0) {
				pageNumer --;
			}
		} else if (direction == 'next') {
			if(pageNumer < numberOfPages){
				pageNumer ++;
			}
		}
		for(var i = 0; i <= numberOfPages; i++){
			if(i == pageNumer){
				element = document.getElementById("menuItem"+i).src = 'menuItemSelected.png';
			}       else{
				element = document.getElementById("menuItem"+i).src = 'menuItem.jpg';
			}
		}

		if(pageNumer == 0) {
			outPutHTML = getStartPage();
		}else if(pageNumer == 1) {
			outPutHTML =  getPageOne();
		}else if(pageNumer == 2) {
			outPutHTML =  getPageTwo();
		}else if(pageNumer == 3){
			outPutHTML = getPageThree();
		}else if(pageNumer == 4){
			outPutHTML = getPageFoure();
		}else if(pageNumer == 5){
			outPutHTML = getPageFive();
		}else if(pageNumer == 6){
				outPutHTML = getPageSix();
		}else if(pageNumer == 7){
			outPutHTML = getPageSeven();
		}else if(pageNumer == 8){
			outPutHTML = getPageEight();
		}else if(pageNumer == 9){
			outPutHTML = getPageNine();
		}
		
		element = document.getElementById("content").innerHTML = outPutHTML;
	}

	function getStartPage() {
		    return "<div style='text-align:left; font-size:3.4em;'>"+
				"<div class='frontPageFont'>Fonts</div>"+
				"<div class='frontPageBorder'>Borders</div>"+
				"<div class='frontPageTextEffect'>Text Effects</div>"+
				"<div><div class='frontPageAnimation' style='width:5em;'>Animation</div></div>"+
				"</div>";      	
	}

	function getPageOne(){
		return "<div>"+
		       "<div style='font-size:3.4em;'>Fonts</div>"+
		       "<div>Download web-fonts using the @font-face rule:</div>"+
			   "<div style='background-color:lightgray; margin:15px;-webkit-border-radius: 5px;border: 1px solid #000;-webkit-box-shadow: #888 10px 10px 5px;' > @font-face {<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Bitstream Vera Serif Bold';<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');<br>"+
			   "}"+
		       "</div>"+
			   "<div >Some text, default font, Some text, default font</div>"+
			   "<div class='bitsteam'>Some text. Using Bitstream Vera Serif Bold font</div>"+
		       "<div >Some text, default font, Some text, default font</div>"+
	           "</div>";
	}

	function getPageTwo(){
		return "<div style='font-size:3.4em;'>Borders</div>"+
			   "<div>Border radius</div>"+
			   "<div>Border shadow</div>"+
			   "<div style='background-color:lightgray; margin:15px;-webkit-border-radius: 5px;border: 1px solid #000;-webkit-box-shadow: #888 10px 10px 5px;' >.sampleDiv{<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius: 20px;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow: #888 10px 10px 5px;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #000;<br>"+
		       "}<br></div>"+
			   "<div style='background-color:lightgray; margin:30px; border-top-left-radius: 15px; border:1px solid black; text-align:center;'>Eksempel 1</div>"+
			   "<div style='background-color:lightgray; margin:30px;border-top-right-radius: 15px; border:1px solid black; text-align:center;'>Eksempel 2</div>"+
			   "<div style='background-color:lightgray; margin:30px;border-bottom-left-radius: 15px; border:1px solid black; text-align:center;'>Eksempel 3</div>"+
			   "<div style='background-color:lightgray; margin:30px;border-bottom-right-radius: 15px; border:1px solid black; text-align:center;'>Eksempel 4</div>"+
			   "<div style='background-color:lightgray; margin:30px;border-radius: 15px; border:1px solid black; text-align:center;'>Eksempel 5</div>"+
			   "<div style='background-color:lightgray; margin:30px;border-radius: 15px; border:1px solid black; text-align:center; -webkit-box-shadow: #888 10px 10px 5px;'>Eksempel 6</div>";
	}

	function getPageThree(){
		return "<div style='font-size:3.4em;'>Text effects</div>"+
		       "<div>CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:</div>"+
		       "<div style='background-color:lightgray; margin:15px;-webkit-border-radius: 5px;border: 1px solid #000;-webkit-box-shadow: #888 10px 10px 5px;'>text-shadow: 2px 2px 2px #000;</div>"+
		       "<div style='margin:10px;text-shadow: 2px 2px 2px #000; font-size:4em; text-align:center;'>Dummy text</div>"+
		       "<div style='margin:10px;text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006; font-size:4em; text-align:center;'>Dummy text</div>"+
		       "<div style='margin:10px;text-shadow: 1px 1px white, -1px -1px #444; font-size:4em; text-align:center;'>Dummy text</div>";
	}

	function getPageFoure(){
		return "<div style='font-size:3.4em;'>Animation</div>"+
		       "<div>Scale, rotate and skew block elements using '-webkit-transform' property</div>"+
		       "<div>Create animation using the '-webkit-transition family'</div>"+
			   "<div style='background-color:lightgray; margin:15px;-webkit-border-radius: 5px;border: 1px solid #000;-webkit-box-shadow: #888 10px 10px 5px;' >#fading {<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: fade;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 5s;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;<br>"+
		       "}<br></div>"+
			   "<div><img id='fading' src='images.jpg' alt='bah'></div>";
	}

	function getPageFive(){
		return "<div style='font-size:3.4em;'>Animation</div>"+
			   "<div style='background-color:lightgray; margin:15px;-webkit-border-radius: 5px;border: 1px solid #000;-webkit-box-shadow: #888 10px 10px 5px;' >#newWidth {<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: newWidth;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 6s;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: 10;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-direction: alternate;<br>"+
		       "}<br></div>"+
		       "<div><img id='newWidth' src='images.jpg' alt='bah'></div>";
	}

	function getPageSix(){
		return "<div style='font-size:3.4em;'>Animation</div>"+
			   "<div style='background-color:lightgray; margin:15px;-webkit-border-radius: 5px;border: 1px solid #000;-webkit-box-shadow: #888 10px 10px 5px;'>#rotate360 {<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: rotate360;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 3s;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: 12;<br>"+
		       "}<br></div>"+
		       "<div><img id='rotate360' src='images.jpg' alt='bah'></div>";
	}

	function getPageSeven(){
		return "<div style='font-size:3.4em;'>Animation</div>"+
			   "<div style='background-color:lightgray; margin:15px;-webkit-border-radius: 5px;border: 1px solid #000;-webkit-box-shadow: #888 10px 10px 5px;' >#both {<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: both;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 5s;<br>"+
			   "&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: 10;<br>"+
		       "}<br></div>"+
		       "<div><img id='both' src='images.jpg' alt='bah'></div>";
	}

	function getPageEight(){
		return "<div style='text-align:center; font-size:3.4em; height:500px;'>Animasjon i 3D</div>"+
			   "<div class='cube'>"+
			   "<div class='topFace'>"+
			   "<div>Topp<br>Plain html</div>"+
			   "</div>"+
			   "<div class='leftFace'>Left<br>This is a <button>html button</button></div>"+
			   "<div class='rightFace'>Right<br>This is a <a href='http://www.vg.no'>link to vg.no</a> </div>"+
			   "</div>"+
			   "</div>";
	}

	function getPageNine(){
		 return "<div style='font-size:3.4em;'>Conclusion </div>"+
		        "<div>Cool</div>"+
		        "<div>IE 9 =)</div>";
	}

</script>


</html>